<template>
    <Modal
        title="售后工单详情"
        :value="show"
        width="640"
        :closable="false"
        @on-visible-change="setVisibility">

        <div v-if="ticket" style="padding: 0 20px">
            <Row class="as-edit-row">
                <i-col span="12">
                    <span class="as-edit-key">工单编号:</span>
                    {{ticket.ticket_sn}}
                </i-col>
                <i-col span="12">
                    <span class="as-edit-key">联系人:</span>
                    {{
                       ticket.subscribe && (ticket.subscribe.name + ' - ' + ticket.subscribe.phone)
                    }}
                </i-col>
            </Row>

            <Row class="as-edit-row">
                <i-col span="24">
                    <span class="as-edit-key">授权房间:</span>
                    <Tag
                        v-for="(room, index) in ticket.ticket_devices"
                        :key="index">{{room.room_name}}</Tag>
                </i-col>
            </Row>

            <Row class="as-edit-row">
                <i-col span="12">
                    <span class="as-edit-key">创建时间:</span>
                    {{ticket.created_at | date('YYYY-MM-DD HH:mm')}}
                </i-col>
                <i-col span="12" v-if="ticket.respond_hour">
                    <span class="as-edit-key">工单紧急度:</span>
                    {{ticket.respond_hour}}小时
                </i-col>
            </Row>

            <Row class="as-edit-row" v-if="ticket.appointment_time">
                <i-col span="24">
                    <span class="as-edit-key">预约上门时间:</span>
                    {{ticket.appointment_time | date('YYYY-MM-DD HH:mm')}}
                </i-col>
            </Row>

            <hr>

            <div class="as-edit-repeat" v-for="(item, index) in ticket.ticket_devices" :key="index">
                <Row class="as-edit-row is-b" >
                    <i-col span="24" class="padding-left-10 padding-right-20">
                        <Row type="flex" justify="space-between">
                            <i-col span="12">
                                <b style="font-size:14px">房间 - {{item.room_name}}</b>
                            </i-col>
                        </Row>
                    </i-col>
                </Row>

                <Row class="as-edit-row">
                    <i-col span="12">
                        <span class="as-edit-key">设备:</span>
                        {{item.device_type | deviceType}}
                    </i-col>
                    <i-col span="12">
                        <span class="as-edit-key">设备SN:</span>
                        {{item.sn || '-'}}
                    </i-col>
                </Row>

                <!-- <Row class="as-edit-row">
                    <i-col span="12">
                        <span class="as-edit-key">保修截止时间:</span>
                        <Tag color="red">已过保</Tag>
                    </i-col>
                </Row> -->

                <Row class="as-edit-row">
                    <i-col span="12">
                        <span class="as-edit-key">故障时间:</span>
                        {{item.fault_time | date('YYYY-MM-DD HH:ss')}}
                    </i-col>
                    <i-col span="12">
                        <span class="as-edit-key">故障描述:</span>
                        {{item.description || '无'}}
                    </i-col>
                </Row>

                <Row class="as-edit-row">
                    <i-col span="12">
                        <span class="as-edit-key">故障分类:</span>
                        {{item.fault && item.fault.first_name || '未确认'}}
                        <span  v-if="item.fault"> - {{item.fault.name}}</span>
                    </i-col>
                    <i-col span="12">
                        <span class="as-edit-key">解决方案:</span>
                        {{item.solution_name || '未确认'}}
                    </i-col>
                </Row>

                <Row class="as-edit-row">
                    <i-col span="24">
                        <span class="as-edit-key">建议处理方案:</span>
                        {{item.note || '无'}}
                    </i-col>
                </Row>

                <div v-if="item.file_ids" v-viewer="{movable: false, scalable: false}">
                    <div class="c-ticket__img" v-for="id in item.file_ids" :key="id">
                        <img class="c-ticket__img__item"  :src="'/v3/file/' + id ">
                    </div>
                </div>
            </div>

        </div>

        <Row slot="footer">
            <Button type="primary" @click="setVisibility(false)">取消</Button>
        </Row>
    </Modal>
</template>

<script>
/**
 * 工单-预约工单详情
 */
import util from '@/libs/util'

export default {
  name: 'appointment-detail-modal',
  props: {
    show: Boolean,
    ticket: Object
  },
  watch: {
    show (n) {
      if (!n) {
        this.rooms = []
        setTimeout(() => {
          this.$emit('update:data', null)
        }, 500)
      }
    }
  },
  methods: {
    concatLocation: util.concatLocation,
    setVisibility (val) {
      this.$emit('update:show', val)
    }
  }
}
</script>

<style lang="less">
.appointment-detail {
    font-size: 14px;
    padding: 20px;
    padding-bottom: 0;
}
.appointment-detail-key {
    display: inline-block;
    width: 100px;
    margin-right: 10px;
    text-align: right;
}
.appointment-detail > p {
    margin-bottom: 20px;
}
.as-edit {
    &-row {
        padding-left: 20px;
        margin-top: 10px;
        margin-bottom: 10px;

        &.is-b {
            padding-left: 0;
        }
    }

    &-key {
        margin-right: 10px;
    }

    &-repeat {
        padding-bottom: 8px;
        overflow: hidden;
        border-bottom: 1px solid #aaa;

        &:hover {
            background-color: #f5f7fa;
        }
    }

    &-repeat:last-child {
        border-bottom: 0;
    }
}
.c-ticket__img{
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin: 6px 6px 0;
}

.c-ticket__img__item{
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>